<div class="theme-config">
	<div class="theme-config-box">
		<div class="spin-icon">
			<i class="fa fa-cogs fa-spin"></i>
		</div>
		<div class="skin-setttings">
			<div class="title">配置</div>
			<div class="setings-item">
				<span>
					折叠侧边栏<!--collapse menu-->
				</span>

				<div class="switch">
					<div class="onoffswitch">
						<input name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu" type="checkbox">
						<label class="onoffswitch-label" for="collapsemenu">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span>
					隐藏侧边栏 <!-- fixed sidebar  -->
				</span>

				<div class="switch">
					<div class="onoffswitch">
						<input name="fixedsidebar" class="onoffswitch-checkbox" id="fixedsidebar" type="checkbox">
						<label class="onoffswitch-label" for="fixedsidebar">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span>
					固定顶部导航<!-- fixed top navbar -->
				</span>

				<div class="switch">
					<div class="onoffswitch">
						<input name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar" type="checkbox">
						<label class="onoffswitch-label" for="fixednavbar">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span>
					退出全屏<!-- boxed layout -->
				</span>

				<div class="switch">
					<div class="onoffswitch">
						<input name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout" type="checkbox">
						<label class="onoffswitch-label" for="boxedlayout">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>
			<div class="setings-item">
				<span>
					固定页脚
				</span>

				<div class="switch">
					<div class="onoffswitch">
						<input name="fixedfooter" class="onoffswitch-checkbox" id="fixedfooter" type="checkbox">
						<label class="onoffswitch-label" for="fixedfooter">
							<span class="onoffswitch-inner"></span>
							<span class="onoffswitch-switch"></span>
						</label>
					</div>
				</div>
			</div>

			<div class="title">皮肤</div>
			<div class="setings-item default-skin">
				<span class="skin-name ">
				 <a href="#" class="s-skin-0">
					默认
				 </a>
			 </span>
		 </div>
		 <div class="setings-item blue-skin">
			<span class="skin-name ">
				<a href="#" class="s-skin-1">
					亮蓝色
				</a>
			</span>
		</div>
		<div class="setings-item yellow-skin">
			<span class="skin-name ">
				<a href="#" class="s-skin-3">
					金黄色
				</a>
			</span>
		</div>
	</div>
</div>
<script>
	// Config box

	// Enable/disable fixed top navbar
	$('#fixednavbar').click(function () {
		if ($('#fixednavbar').is(':checked')) {
			$(".navbar-static-top").removeClass('navbar-static-top').addClass('navbar-fixed-top');
			$("body").removeClass('boxed-layout');
			$("body").addClass('fixed-nav');
			$('#boxedlayout').prop('checked', false);

			if (localStorageSupport) {
				localStorage.setItem("boxedlayout",'off');
			}

			if (localStorageSupport) {
				localStorage.setItem("fixednavbar",'on');
			}
		} else {
			$(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
			$("body").removeClass('fixed-nav');

			if (localStorageSupport) {
				localStorage.setItem("fixednavbar",'off');
			}
		}
	});

	// Enable/disable fixed sidebar
	$('#fixedsidebar').click(function () {
		if ($('#fixedsidebar').is(':checked')) {
			$("body").addClass('fixed-sidebar');
			$('.sidebar-collapse').slimScroll({
				height: '100%',
				railOpacity: 0.9
			});

			if (localStorageSupport) {
				localStorage.setItem("fixedsidebar",'on');
			}
		} else {
			$('.sidebar-collapse').slimscroll({destroy: true});
			$('.sidebar-collapse').attr('style', '');
			$("body").removeClass('fixed-sidebar');

			if (localStorageSupport) {
				localStorage.setItem("fixedsidebar",'off');
			}
		}
	});

	// Enable/disable collapse menu
	$('#collapsemenu').click(function () {
		if ($('#collapsemenu').is(':checked')) {
			$("body").addClass('mini-navbar');
			SmoothlyMenu();

			if (localStorageSupport) {
				localStorage.setItem("collapse_menu",'on');
			}

		} else {
			$("body").removeClass('mini-navbar');
			SmoothlyMenu();

			if (localStorageSupport) {
				localStorage.setItem("collapse_menu",'off');
			}
		}
	});

	// Enable/disable boxed layout
	$('#boxedlayout').click(function () {
		if ($('#boxedlayout').is(':checked')) {
			$("body").addClass('boxed-layout');
			$('#fixednavbar').prop('checked', false);
			$(".navbar-fixed-top").removeClass('navbar-fixed-top').addClass('navbar-static-top');
			$("body").removeClass('fixed-nav');
			$(".footer").removeClass('fixed');
			$('#fixedfooter').prop('checked', false);

			if (localStorageSupport) {
				localStorage.setItem("fixednavbar",'off');
			}

			if (localStorageSupport) {
				localStorage.setItem("fixedfooter",'off');
			}


			if (localStorageSupport) {
				localStorage.setItem("boxedlayout",'on');
			}
		} else {
			$("body").removeClass('boxed-layout');

			if (localStorageSupport) {
				localStorage.setItem("boxedlayout",'off');
			}
		}
	});

	// Enable/disable fixed footer
	$('#fixedfooter').click(function () {
		if ($('#fixedfooter').is(':checked')) {
			$('#boxedlayout').prop('checked', false);
			$("body").removeClass('boxed-layout');
			$(".footer").addClass('fixed');

			if (localStorageSupport) {
				localStorage.setItem("boxedlayout",'off');
			}

			if (localStorageSupport) {
				localStorage.setItem("fixedfooter",'on');
			}
		} else {
			$(".footer").removeClass('fixed');

			if (localStorageSupport) {
				localStorage.setItem("fixedfooter",'off');
			}
		}
	});

	// SKIN Select
	$('.spin-icon').click(function () {
		$(".theme-config-box").toggleClass("show");
	});

	// Default skin
	$('.s-skin-0').click(function () {
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-2");
		$("body").removeClass("skin-3");
	});

	// Blue skin
	$('.s-skin-1').click(function () {
		$("body").removeClass("skin-2");
		$("body").removeClass("skin-3");
		$("body").addClass("skin-1");
	});

	// Inspinia ultra skin
	$('.s-skin-2').click(function () {
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-3");
		$("body").addClass("skin-2");
	});

	// Yellow skin
	$('.s-skin-3').click(function () {
		$("body").removeClass("skin-1");
		$("body").removeClass("skin-2");
		$("body").addClass("skin-3");
	});

	if (localStorageSupport) {
		var collapse = localStorage.getItem("collapse_menu");
		var fixedsidebar = localStorage.getItem("fixedsidebar");
		var fixednavbar = localStorage.getItem("fixednavbar");
		var boxedlayout = localStorage.getItem("boxedlayout");
		var fixedfooter = localStorage.getItem("fixedfooter");

		if (collapse == 'on') {
			$('#collapsemenu').prop('checked','checked')
		}
		if (fixedsidebar == 'on') {
			$('#fixedsidebar').prop('checked','checked')
		}
		if (fixednavbar == 'on') {
			$('#fixednavbar').prop('checked','checked')
		}
		if (boxedlayout == 'on') {
			$('#boxedlayout').prop('checked','checked')
		}
		if (fixedfooter == 'on') {
			$('#fixedfooter').prop('checked','checked')
		}
	}
</script>